import { View } from "@tarojs/components";
import clsx from "clsx";

export default function Index() {
  return (
    <>
      <View className="font-semibold text-lg sticky top-0 bg-white p-4 z-10">
        公积金贷款利率
      </View>
      <View className="px-4">
        <View className="flex border-b border-gray-600 py-1">
          <View className="w-28">调整日期</View>
          <View className="flex-1">1年期</View>
          <View className="flex items-center">5年期</View>
        </View>
        {data.map((d, k) => (
          <View
            key={k}
            className={clsx("flex py-1", {
              "border-b border-gray-400": k < data.length - 1,
            })}
          >
            <View className="w-28">{d.date}</View>
            <View className="flex-1">{d.belowFiveYear}%</View>
            <View>{d.overFiveYear}%</View>
          </View>
        ))}
      </View>
    </>
  );
}

const data = [
  {
    date: "1997-01-01",
    belowFiveYear: 7.65,
    overFiveYear: 8.1,
  },
  {
    date: "1999-09-21",
    belowFiveYear: 4.14,
    overFiveYear: 4.59,
  },
  {
    date: "2002-02-21",
    belowFiveYear: 3.6,
    overFiveYear: 4.05,
  },
  {
    date: "2004-10-29",
    belowFiveYear: 3.78,
    overFiveYear: 4.23,
  },
  {
    date: "2005-03-17",
    belowFiveYear: 3.96,
    overFiveYear: 4.41,
  },
  {
    date: "2006-04-28",
    belowFiveYear: 4.14,
    overFiveYear: 4.59,
  },
  {
    date: "2007-03-18",
    belowFiveYear: 4.32,
    overFiveYear: 4.77,
  },
  {
    date: "2007-05-19",
    belowFiveYear: 4.41,
    overFiveYear: 4.86,
  },
  {
    date: "2007-07-21",
    belowFiveYear: 4.5,
    overFiveYear: 4.95,
  },
  {
    date: "2007-08-22",
    belowFiveYear: 4.59,
    overFiveYear: 5.04,
  },
  {
    date: "2007-09-15",
    belowFiveYear: 4.77,
    overFiveYear: 5.22,
  },
  {
    date: "2007-12-21",
    belowFiveYear: 4.77,
    overFiveYear: 5.22,
  },

  {
    date: "2008-09-16",
    belowFiveYear: 4.59,
    overFiveYear: 5.13,
  },
  {
    date: "2008-10-09",
    belowFiveYear: 4.32,
    overFiveYear: 4.86,
  },
  {
    date: "2008-10-27",
    belowFiveYear: 4.05,
    overFiveYear: 4.59,
  },
  {
    date: "2008-10-30",
    belowFiveYear: 4.05,
    overFiveYear: 4.59,
  },
  {
    date: "2008-11-27",
    belowFiveYear: 3.51,
    overFiveYear: 4.05,
  },
  {
    date: "2008-12-23",
    belowFiveYear: 3.33,
    overFiveYear: 3.87,
  },
  {
    date: "2010-10-20",
    belowFiveYear: 3.5,
    overFiveYear: 4.05,
  },
  {
    date: "2010-12-26",
    belowFiveYear: 3.75,
    overFiveYear: 4.3,
  },
  {
    date: "2011-02-09",
    belowFiveYear: 4.0,
    overFiveYear: 4.5,
  },
  {
    date: "2011-04-06",
    belowFiveYear: 4.2,
    overFiveYear: 4.7,
  },
  {
    date: "2011-07-07",
    belowFiveYear: 4.45,
    overFiveYear: 4.95,
  },

  {
    date: "2012-06-08",
    belowFiveYear: 4.2,
    overFiveYear: 4.7,
  },
  {
    date: "2012-07-06",
    belowFiveYear: 4.0,
    overFiveYear: 4.5,
  },
  {
    date: "2014-11-22",
    belowFiveYear: 3.75,
    overFiveYear: 4.25,
  },
  {
    date: "2015-03-01",
    belowFiveYear: 3.5,
    overFiveYear: 4.0,
  },
  {
    date: "2015-05-11",
    belowFiveYear: 3.25,
    overFiveYear: 3.75,
  },
  {
    date: "2015-06-28",
    belowFiveYear: 3.0,
    overFiveYear: 3.5,
  },
  {
    date: "2015-08-26",
    belowFiveYear: 2.75,
    overFiveYear: 3.25,
  },
  {
    date: "2022-10-01",
    belowFiveYear: 2.6,
    overFiveYear: 3.1,
  },
  {
    date: "2024-05-18",
    belowFiveYear: 2.35,
    overFiveYear: 2.85,
  },
].reverse();
